<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ; xmlns:th="http://www.thymeleaf.org" ;>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>地图</title>

    <script src="../static/js/jquery-3.3.1.js"></script>
    <script src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css"/>


    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=3.0&ak=Yztep29mLIjoxdtzTHspFljzYQjBQtLc"></script>

    <script type="text/javascript"
            src="http://api.map.baidu.com/library/DistanceTool/3.0/src/DistanceTool_min.js"></script>


    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            height: 100%
        }
    </style>
</head>

<body>


<div id="container"></div>
</body>
</html>


<script type="text/javascript">

    <#--var index = 0;-->
    <#--var data = [];-->
    <#--<#list mapList as mapBean>-->
    <#--data[index] = ${mapBean};-->
    <#--index++;-->
    <#--</#list>-->

    var map = new BMap.Map('container');
    // 创建地图实例
    var centerPoint = new BMap.Point(120.603493, 31.2903);
    // 创建点坐标
    map.centerAndZoom(centerPoint, 11);


    // var geolocation = new BMap.Geolocation();
    // geolocation.getCurrentPosition(function(r){
    //     if(this.getStatus() == BMAP_STATUS_SUCCESS){
    //         var mk = new BMap.Marker(r.point);
    //         map.addOverlay(mk);
    //         map.panTo(r.point);
    //         alert('您的位置：'+r.point.lng+','+r.point.lat);
    //     }
    //     else {
    //         alert('failed'+this.getStatus());
    //     }
    // },{enableHighAccuracy: true})

    // 初始化地图， 设置中心点坐标和地图级别
    // var zoomCtrl = new BMap.ZoomControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: new BMap.Size(20, 20)});
    // map.addControl(zoomCtrl);

    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用


    // var myDis = new BMapLib.DistanceTool(map);
    // map.addEventListener("load", function () {
    //     myDis.open();  //开启鼠标测距
    //     //myDis.close();  //关闭鼠标测距
    // });

    // // 初始化地图,设置中心点坐标和地图级别
    var removeMarker = function (e, ee, marker) {
        map.removeOverlay(marker);
    }

    var opts = {
        width: 300,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "电柜信息", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };

    // public String cabinet_number;
    // public int ver;
    // public String ver_name;
    // public String device_id;
    // public long time;
    // public String status;
    // public String cab_version;
    // public String cabinet_name;
    // public String city_name;
    // public String address;
    //
    // public double jing;
    // public double wei;

    // var myDis = new BMapLib.DistanceTool(map);
    // map.addEventListener("load",function(){
    //     myDis.open();  //开启鼠标测距
    //     //myDis.close();  //关闭鼠标测距
    // });

    $.get("/yiqiTest/map/map", function (data, status) {
        var mapList = data.mapList;
        console.log(mapList);
        for (var i = 0; i < mapList.length; i++) {

            var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                    new BMap.Size(23, 25), {
                        offset: new BMap.Size(10, 25),
                        imageOffset: new BMap.Size(0, 0 - 10 * 25)
                    });


            var point = new BMap.Point(mapList[i].jing, mapList[i].wei);
            var marker;
            if (mapList[i].state == 0) {
                marker = new BMap.Marker(point);
            } else {
                marker = new BMap.Marker(point, {icon: myIcon});
            }


            var content =
                    "电柜编号：" + mapList[i].cabinetNumber +
                    "<br/>电柜名称：" + mapList[i].cabinetName +
                    "<br/>城市：" + mapList[i].cityName + "   地址：" + mapList[i].address +
                    "<br/>经度：" + mapList[i].jing + "纬度：" + mapList[i].wei
            ;
            map.addOverlay(marker);  // 将标注添加到地图中
            addClickHandler(content, marker);
        }

    })

    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                    openInfo(content, e)
                }
        );
    }

    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }


</script>

